<template>
  <div class="recommend" ref="recommend">
    <!-- <router-link tag="div" to="/search">
      <div class="lzlSearch">搜索</div>
    </router-link>-->
    <scroll ref="scroll" class="recommend-content" :data="discList">
      <div>
        <div v-if="recommends.length" class="slider-wrapper">
          <slider>
            <div v-for="item in recommends">
              <a>
                <img
                  class="needsclick"
                  style="widht:100%;height:200px"
                  @load="loadImage"
                  :src="item.url"
                  @click="selectItemLBT(item)"
                />
              </a>
            </div>
          </slider>
        </div>
        <div class="lzlActive">
          <div class="lzlActive-box">
            <router-link
              tag="div"
              :to="{name:'FreePage', params: {id:1,title:'免费畅听',is_free:true}}"
            >
              <div class="lzlActive-item">
                <div class="lzlActive-item-top">
                  <img src="../../common/image/mfct.png" />
                </div>
                <div class="lzlActive-item-bottom">免费畅听</div>
              </div>
            </router-link>
            <router-link
              tag="div"
              :to="{name:'FreePage', params: {id:1222,title:'独家优惠',is_free:false}}"
            >
              <div class="lzlActive-item">
                <div class="lzlActive-item-top">
                  <img src="../../common/image/djyh.png" />
                </div>
                <div class="lzlActive-item-bottom">独家优惠</div>
              </div>
            </router-link>
            <router-link
              tag="div"
              :to="{name:'FreePage', params: {id:1333,title:'学习资料',type:'knowledge'}}"
            >
              <div class="lzlActive-item">
                <div class="lzlActive-item-top">
                  <img src="../../common/image/xzs.jpg" />
                </div>
                <div class="lzlActive-item-bottom">学习资料</div>
              </div>
            </router-link>
            <!-- <router-link tag="div" to="/search">
              <div class="lzlActive-item">
                <div class="lzlActive-item-top">
                  <img src="../../common/image/search.png" />
                </div>
                <div class="lzlActive-item-bottom">搜索</div>
              </div>
            </router-link>-->
          </div>
        </div>
        <div class="recommend-list">
          <h1 class="list-title">我的故事</h1>
          <router-link
            tag="div"
            :to="{name:'FreePage', params: {id:13,title:'历史故事',type:'history'}}"
          >
            <div class="more">更多></div>
          </router-link>
          <ul style="overflow:hidden;clear:both">
            <li
              @click="selectItem(item)"
              v-for="item in discList"
              class="item"
              style="float: left;"
            >
              <div class="icon">
                <img
                  width="100%"
                  style=" border-radius: 15px;"
                  v-lazy="item.cover[0].url"
                  :alt="item.cover[0].name"
                />
              </div>
              <div class="text">
                <h2 class="name" v-html="item.title"></h2>
                <p class="desc" v-html="item.subtitle"></p>
              </div>
            </li>
          </ul>
        </div>
        <!-- 0元福利 -->
        <!-- <div class="recommend-list" @click="gotowelfare" v-if="lyflimg">
          <h1 class="list-title">0元福利</h1>
          <div class="more"></div>
          <img
            src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3234233139,2007656912&fm=11&gp=0.jpg"
            style="width:100%"
          />
        </div>-->
      </div>
      <div class="loading-container" v-show="!discList.length">
        <loading></loading>
      </div>
    </scroll>
    <router-view></router-view>
    <tab class="lzlTab"></tab>
  </div>
</template>


<script type="text/ecmascript-6">
import Loading from "base/loading/loading";
import Scroll from "base/scroll/scroll";
import Slider from "base/slider/slider";
import { getRecommend, getDiscList } from "api/recommend";
import { ERR_OK } from "api/config";
import { playlistMixin } from "common/js/mixin";
import { mapMutations } from "vuex";
import { commonParams, options } from "../../api/config";
import axios from "axios";
import { Base64 } from "js-base64";
import Tab from "components/tab/tab";
import wx from "weixin-js-sdk";
export default {
  mixins: [playlistMixin],
  name: "Recommend",
  watch: {
    $route(to, from) {
      this.closeFlag = 0;
      if (to.name == "Recommend") {
        this.getImg();
        //window.removeEventListener("popstate", this.backChange, false);
      } else {
      }
    },
  },
  destroyed() {
    //window.removeEventListener("popstate", this.backChange, false);
  },
  mounted() {
    // sessionStorage.clear();
    // history.pushState(null, null, document.URL);
    // window.addEventListener("popstate", this.backChange, false);
  },
  created() {
    //this._getRecommend();
    this._getDiscList();
    this.getImg();
    this.getUser();
  },
  data() {
    return {
      recommends: [],
      discList: [],
      lyflimg: false,
      closeFlag: 0,
    };
  },
  methods: {
    backChange() {
      this.closeFlag++;
      console.log(this.closeFlag);
      history.pushState(null, null, document.URL);
      var _this = this;

      //
      if (_this.addtuan == true || _this.addService == true) {
        _this.addtuan = false;
        _this.addService = false;
      } else {
        _this.$router.push({ path: "/Recommend", replace: true });

        if (_this.closeFlag == 2) {
          wx.closeWindow();
        }

        // _this.$router.push({
        //   path: "fenxiangfanxian"
        // });
      }
    },
    getUser() {
      var _this = this;
      var aaa = _this.GetQueryString("data");
      if (aaa == "") {
        //return;
        wx.closeWindow();
      }

      // var b = new Base64();
      var dataStr = JSON.parse(Base64.decode(aaa)); //解密

      console.log(dataStr);
      const url = "http://www.shizilaoba.com/lion/wechat/user/query"; //调用自定义的接口
      const datas = Object.assign(
        {},
        {
          openid: dataStr.openid,
        }
      );
      axios.post(url, datas).then((res) => {
        //缓存用户数据
        var storage = window.localStorage;
        var d = JSON.stringify(res.data.data);
        storage.setItem("userInfo", d);
        setTimeout(function () {
          switch (dataStr.model) {
            case "article":
              return;
            case "discounts":
              _this.$router.push({
                name: "FreePage",
                params: { id: 1222, title: "独家优惠", is_free: false },
              });
              break;
            case "invite":
              _this.$router.push({
                path: "fenxiangfanxian",
              });
              break;
          }
          console.log(d);
        }, 500);
        //TODO处理用户跳转
      });
    },
    GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
      var context = "";
      if (r != null) context = r[2];
      reg = null;
      r = null;
      return context == null || context == "" || context == "undefined"
        ? ""
        : context;
    },
    // 获取轮播图
    getImg() {
      var _this = this;
      _this.recommends = [];
      const url = "http://www.shizilaoba.com/lion/file/list"; //调用自定义的接口
      const data = Object.assign({}, {});
      axios.post(url, { params: data }).then((res) => {
        _this.recommends = res.data.data;
        console.log("轮播图");
        console.log(_this.recommends);
        //return Promise.resolve(res.data); //es6新语法，返回一个以给定值解析后的Promise对象
      });
    },
    gotowelfare() {
      this.$router.push({ name: "welfare", params: { setid: 111222 } });
    },
    handlePlaylist(playlist) {
      console.log("计算了");
      console.log(playlist);
      const bottom = playlist.length > 0 ? "135px" : "80px";
      console.log(bottom);
      this.$refs.recommend.style.bottom = bottom; //底部播放器适配
      this.$refs.scroll.refresh(); //强制scroll重新计算
      //console.log("aaaa");
    },
    selectItem(item) {
      // this.$router.push({
      //   path: `/recommend/${item.dissid}`
      // });
      // this.setDisc(item);

      this.$router.push({ name: "StoryDetail", params: { obj: item } });
      //this.setDisc(item);
    },
    selectItemLBT(item) {
      item.id = item.aid;
      //debugger
      this.$router.push({ name: "StoryDetail", params: { obj: item } });
    },
    // _getRecommend() {
    //   var _this = this;
    //   getRecommend().then(res => {
    //     if (res.code === ERR_OK) {
    //       console.log(res.data.slider);
    //       this.recommends = res.data.slider;
    //     }
    //   });
    //   // setTimeout(function() {
    //   //   _this.handlePlaylist(1);
    //   // }, 2000);
    // },
    _getDiscList() {
      var _this = this;
      const url = "http://www.shizilaoba.com/lion/article/list"; //调用自定义的接口
      const data = Object.assign(
        {},
        {
          filter: [{ pid: 0 }],
        }
      );
      axios.post(url, data).then((res) => {
        // this.discList = res.data.data;
        // console.log(this.discList);
        for (let a = 0; a < 4; a++) {
          this.discList.push(res.data.data[a]);
        }
        this.lyflimg = true;
        // setTimeout(function() {
        //   _this.handlePlaylist(1);
        // }, 500);
        //return Promise.resolve(res.data); //es6新语法，返回一个以给定值解析后的Promise对象
      });
      // getDiscList().then(res => {
      //   if (res.code === ERR_OK) {
      //     for (let a = 0; a < 4; a++) {
      //       this.discList.push(res.data.list[a]);
      //     }
      //     //this.discList = res.data.list;
      //   }
      // });
    },
    loadImage() {
      if (!this.checkloaded) {
        this.checkloaded = true;
        this.$refs.scroll.refresh();
      }
    },
    ...mapMutations({
      setDisc: "SET_DISC",
    }),
  },

  components: {
    Slider,
    Scroll,
    Loading,
    Tab,
  },
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';

.lzlTab {
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  background: #f7f7f7;
}

.lzlActive {
  width: 100%;
  height: 80px;
}

.lzlActive .lzlActive-box {
  width: 90%;
  height: 80px;
  margin: 0 auto;
}

.lzlActive .lzlActive-box .lzlActive-item {
  float: left;
  width: 33%;
  height: 80px;
}

.lzlActive .lzlActive-box .lzlActive-item .lzlActive-item-top {
  height: 50px;
  width: 60px;
  text-align: center;
  margin: 10px auto;
}

.lzlActive .lzlActive-box .lzlActive-item .lzlActive-item-top img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.lzlActive .lzlActive-box .lzlActive-item .lzlActive-item-bottom {
  height: 30px;
  text-align: center;
}

.bggg {
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: #fff;
  z-index: 99999;
}

.lzlSearch {
  position: fixed;
  top: 10px;
  left: 5%;
  right: 5%;
  height: 44px;
  background: #333;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  line-height: 44px;
  padding-left: 10px;
}

.recommend {
  position: fixed;
  width: 100%;
  top: 0px;
  bottom: 44px;

  .recommend-content {
    height: 100%;
    overflow: hidden;

    .slider-wrapper {
      position: relative;
      width: 100%;
      height: 200px;
      overflow: hidden;
    }

    .recommend-list .more {
      width: 50%;
      height: 65px;
      line-height: 65px;
      float: left;
      padding-top: 18px;
      text-align: right;
      color: $color-theme;
    }

    .recommend-list {
      .list-title {
        width: 45%;
        float: left;
        height: 65px;
        line-height: 65px;
        padding-left: 5%;
        font-size: 26px;
        padding-top: 18px;
        font-weight: 600px;
      }

      .item {
        width: 50%;
        padding: 10px 5%;

        .icon {
        }

        .text {
          display: flex;
          flex-direction: column; // 纵向排列
          justify-content: center; // 垂直居中
          flex: 1;
          line-height: 20px;
          overflow: hidden;
          font-size: $font-size-medium;

          .name {
            margin: 10px 0;
            color: $color-text;
            font-size: 18px;
            font-weight: 600;
          }

          .desc {
            color: $color-text-d;
            height: 20px;
            overflow: hidden;
          }
        }
      }
    }

    .loading-container {
      position: absolute;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
